class ClickEnlarge extends HTMLElement {
  constructor() {
    super();
    this.appendChild(ClickEnlarge.template.content.cloneNode(true));
    this.mediaQueryList = window.matchMedia('(min-width: 680px)');
    this.mediaQueryListener = this.checkMediaQuery.bind(this);
    this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
    this.openPopup = this.openPopup.bind(this);
  }

  static get template() {
    if (!this._template) {
      this._template = document.createElement('template');
      this._template.innerHTML = `
        <style>
          .enlarged-image {
            width: auto;
            height: calc(100vh - 2em - 6px);
            max-width: 100%;
            max-height: 100vh;
            object-fit: contain;
          }
          .close-button {
            cursor: pointer;
            position: absolute;
            top: var(--brick-space-x2, 10px);
            right: var(--brick-space-x2, 10px);
          }
          dialog {
            padding: 0;
            border: none;
            background: transparent;
          }
          dialog,
          dialog::backdrop {
            opacity: 0;
            transition: opacity 0.35s, display 0.35s allow-discrete;
          }
          dialog[open],
          dialog[open]::backdrop {
            opacity: 1;
          }
          dialog::backdrop {
            background: rgba(0, 0, 0, 0.5);
          }
        </style>
        <dialog>
          <div class="enlarged-image-container"></div>
          <brick-button-v7 class="close-button" data-size="small" data-iconid="close" data-icontext="Lukk bildet"></brick-button-v7>
        </dialog>
      `;
    }
    return this._template;
  }

  connectedCallback() {
    if (this.dataset.enlarge === 'true') {
      this.checkMediaQuery(this.mediaQueryList);
    }
  }
  checkMediaQuery(e) {
    if (e.matches) {
      if (!this.isMediaQueryMatched) {
        this.setUpListeners();
        this.isMediaQueryMatched = true;
      }
    } else {
      if (this.isMediaQueryMatched) {
        this.removeEventListener('click', this.openPopup);
        this.isMediaQueryMatched = false;
      }
    }
  }

  setUpListeners() {
    this.popup = this.querySelector('dialog');
    this.enlargedImgContainer = this.popup?.querySelector(
      '.enlarged-image-container'
    );

    this.addEventListener('click', this.openPopup);
    this.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        this.openPopup();
      }
    });
  }

  renderImage() {
    if (this.cloned) {
      return;
    }
    this.img = this.querySelector('img');
    this.cloned = true;
    const clonedImg = this.img.cloneNode(true);
    clonedImg.setAttribute('sizes', '100vw');
    clonedImg.classList.add('enlarged-image');
    this.enlargedImgContainer.appendChild(clonedImg);
    const internals = this.attachInternals();
    internals.ariaDescribedByElements = [this.enlargedImgContainer];
  }

  openPopup() {
    this.renderImage();
    if (this.popup.open) {
      this.popup.close();
      this.removeAttribute('aria-expanded');
    } else {
      this.popup.showModal();
      const closeButton = this.popup.querySelector('button');
      closeButton.focus();
      this.setAttribute('aria-expanded', 'true');
    }
  }
  disconnectedCallback() {
    this.removeEventListener('click', this.openPopup);
  }
}

if (customElements && !customElements.get('click-enlarge')) {
  customElements.define('click-enlarge', ClickEnlarge);
} else {
  console.warn('click-enlarge has already been defined');
}